<template>
  <div id="mobileTerminal">
    <img class="img" src="../../assets/images/mobileTerminal/left_yd.png" alt="" srcset="">
    <ul class="appCount">
      <li class="appTtem" v-for="item in appData" :key="item.id">
        <img class="logo" :src="item.logo" alt="" srcset="">
        <div class="describe">
          <p class="name">
            {{item.name}}
            <i v-if="item.type == 'public'" class="iconfont">&#xe650;</i>
            <i v-else class="iconfont">&#xe643;</i>
          </p>
          <p class="test">{{item.text}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'mobileTerminal',
  data() {
    return {
      appData: [
        {
          name: '账三丰服务平台',
          logo: require('../../assets/images/mobileTerminal/zsf.png'),
          text: '账三丰服务平台是以财务核算为中台为企业打造的业财一体化平台，包含发票云、集团云、营销云、进销存云、预算云、审批云、银企互联、项目管理云、法律服务云等全模块云服务，以数智科技，赋能企业数字化管理。',
          id: '1',
          type: 'public'
        },
        {
          name: '账三丰ERP工作台',
          logo: require('../../assets/images/mobileTerminal/Erplogo.jpg'),
          text: '账三丰ERP工作台是一款简单好用的企业工作台。其他包含考勤打卡、OA审批、财务记账、人事异动等广泛功能。',
          id: '5',
          type: 'app'
        },
        {
          name: '三丰审批',
          logo: require('../../assets/images/mobileTerminal/sp.png'),
          text: '专注于移动端报销、流程查看、操作审批、转发。提高企业协同办公效率，打造优质的办公体验。',
          id: '2',
          type: 'app'
        },
        {
          name: '三丰考勤',
          logo: require('../../assets/images/mobileTerminal/kq.png'),
          text: '一款员工在移动端打卡、请假、调休等能让企业考勤更加规范，效率更好、更精准、更加流程化的一款考勤软件。',
          id: '3',
          type: 'app'
        },
        {
          name: '三丰掌财',
          logo: require('../../assets/images/mobileTerminal/sfcs.jpg'),
          text: '三丰掌上财税是一款手机端做账与查账兼并的小程序，实现随时随地可以录入凭证数据，功能齐全，简单易上手，让财务更简单！',
          id: '4',
          type: 'app'
        }
      ]
    };
  }
};
</script>

<style lang="less">
#mobileTerminal {
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    height: 70%;
  }
  .appCount {
    width: 50%;
    height: 70%;
    overflow-y: auto;
    padding: 0 0 0 20px;
    .appTtem {
      width: 100%;
      height: 33.33%;
      float: left;
      border-bottom: 1px solid rgb(240, 240, 240);
      display: flex;
      align-items: center;
      .logo {
        width: 80px;
        height: 80px;
        border-radius: 5px;
      }
      .describe {
        width: calc(100% - 80px);
        height: 80px;
        float: right;
        font-weight: bold;
        .name {
          padding-left: 15px;
          font-size: 16px;
          color: #333;
          margin-bottom: 5px;
          .iconfont{
            font-size: 17px;
            color: #ccc;
            font-weight: 300;
          }
        }
        .test {
          padding-left: 15px;
          font-size: 13px;
          color: #545554;
        }
      }
    }
  }
}
</style>